<template>
  <div class="audit-nav">
    <div class="nav-box">
      <div class="nav-item">
        <span v-for="(item,index) in tabList" 
        @click="onTabChangeClick(item.id)"
        :key="item.id" 
        :class="{active:tabIndex === item.id}">
          {{item.name}}
        </span>
      </div>
      <div class="nav-item">
        <p>更多流程 > </p>
      </div>
    </div>
    <div class="nav-line">
      <div class='audit-line'>
        <div class="audit-line-item">
          <div class="line-left" >
            <div class="test">
              申请年假休息/工作已交接，望批准
            </div>
            <div class="user-time">
              <span class="user-name">张三</span>
              <span class="user-time">01.01</span>
            </div>
          </div>
          <div class="line-left" >
            <div class="test">
              申请年假休息/工作已交接，望批准
            </div>
            <div class="user-time">
              <span class="user-name">张三</span>
              <span class="user-time">01.01</span>
            </div>
          </div>
          <div class="line-left" >
            <div class="test">
              申请年假休息/工作已交接，望批准
            </div>
            <div class="user-time">
              <span class="user-name">张三</span>
              <span class="user-time">01.01</span>
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </div>
  <div class="application">
    <div class="application-box">
      <div class="application-list">
        <div class="list-left">
          <span :class="{'active-app':appIndex===item.id}" v-for="(item,index) in appInfo" 
            @click="onAppInfoChangeClick(item.id)"
          :key="item.id">
          {{item.title}}
          </span>
          <div class="bottom-line"></div>
        </div>
        <div class="list-right">编辑
          <el-icon><EditPen /></el-icon>
        </div>
      </div>

      <!-- 常用应用栏 -->
      <div class="application-icon">
        <div class="app-left">
          <ArrowLeft style="width: 20px; height: 20px; margin-right: 8px" />
        </div>
        <div class="app-item">
          <div class="app-item-list">
            <div class="list-item" v-for="(item,index) in iconList" :key="index">
              <i class="iconfont" :class="item.class"></i>
              <p>{{item.title}}</p>
            </div>
          </div>
        </div>
        <div class="app-right">
          <ArrowRight style="width: 20px; height: 20px; margin-right: 8px"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref}from 'vue'
// 定义Tab栏
const tabIndex = ref(0)
// 定义常用应用栏
const appIndex = ref(0)
// 定义Tab栏数据
const tabList = ref([
  {
    name: '我的审核',
    id: 0,
  },
  {
    name: '我的申请',
    id: 1,
  }
])
// 定义按钮图标数据
const appInfo=ref([
  {title:'常用应用',id:0},
  {title:'公共资源',id:1},
  {title:'物流事业',id:2},
  {title:'汽车事业',id:3},

])
// 定义icon图标栏
const iconList = ref([
  {title:'财务管理系统',class:' icon-drxx91'},
  {title:'订单管理系统',class:' icon-qingjiaguanli-'},
  {title:'人员管理系统',class:' icon-drxx91'},
  {title:'出车管理系统',class:' icon-caiwuguanli'},
  {title:'收车管理系统',class:' icon-drxx91'},
  {title:'入库管理系统',class:' icon-qingjiaguanli-'},
  {title:'出纳管理系统',class:' icon-drxx91'},
  {title:'报表管理系统',class:' icon-caiwuguanli'},
])
// 切换tab
function onTabChangeClick(id){
  tabIndex.value = id
}
// 切换常用应用栏
function onAppInfoChangeClick(id){
  appIndex.value = id
  const width =document.querySelectorAll('.list-left span')
  const bottomLine = document.querySelector('.bottom-line')
  console.log(width[id].offsetLeft-(bottomLine.offsetLeft/2))
  console.log(width[id].offsetLeft)
  bottomLine.style.width = `${width[id].offsetWidth}px`
  bottomLine.style.transform = `translateX(${width[id].offsetLeft-(bottomLine.offsetWidth/2)}px)`
}
</script>

<style lang="scss" scoped>
@import '@/assets/application/iconfont.css';
.audit-nav{
  border-radius: 8px;
  background: white;
  padding: 10px;
  height: 260px;
  .nav-box{
    line-height: 60px;
    border-bottom: 2px solid #e6e8e9;
    padding-left:20px ;
    padding-right: 10px;
    color: #9ea3a4;
    display: flex;
    justify-content: space-between;
    .nav-item{
      display: flex;
      justify-content: space-between;
      height: 60px;
      span{
        display: block;
        height: 60px;
        margin-right: 50px;
        cursor: pointer;
        // transition: 0.5s; 
      }
    }
  }
  .nav-line{
    .audit-line{
      .audit-line-item{
        .line-left{
          display: flex;
          justify-content: space-between;
          height: 50px;
          border-left: 5px solid #0b78e8;
          border-radius: 4px 0 0 4px;
          margin-top: 10px;
          line-height: 50px;
          padding-left:15px ;
          padding-right: 25px;
          background-color: #fafafa;
          .user-time{
            .user-name{
              margin-right: 70px;
            }
          }
        }
      }
    }
  }
}
.active{
  color: #252a2e;
  border-bottom: 2px solid #0b78e8;
  // height: 40px;
}
// 常用应用栏
.application{
  border-radius: 8px;
  margin-top: 17px;
  height: 188px;
  background-color: white;
  color: #b5babb;
  .application-box{
    padding-left:20px;
    padding-right: 20px;
    height: 60px;
    line-height: 60px;
    .application-list{
      border-bottom:2px solid #e6e8e9;
      display: flex;
      justify-content: space-between;
      .list-left{
        span{
          margin-right:50px ;
          transition: 0.5s;
          cursor: pointer;
        }
        .bottom-line{
          background-color: #0b78e8;
          height: 2px;
          width: 65px;
          // transform: translateX(70px);
        }
      }
      .list-right{
        .el-icon{
          margin-left: 10px;
        }
      }
    }
    .application-icon{
      display: flex;
      justify-content: space-between;
      align-self:center;
      text-align: center;
      line-height: 130px;
      .app-item{
        // flex: 1;
        width: 1000px;
        overflow: hidden;
        align-items: center;
        align-self: center;
        .app-item-list{
          display: flex;
          
          .list-item{
            padding: 2px;
            line-height: 40px;
            font-size: 14px;
            width: 120px;
            text-align: center;
            p{
              margin: 0;
              
            }
          }
        }
        .iconfont{
          color: #0b78e8;
          font-size: 42px;
        }
      }
    }
  }
}
.active-app{
  color: #252a2e;
}
</style>